<template>
	<!-- 歌单详情页 -->
	<div class="songlistDetailContainer container">
		<!-- 歌单信息 -->
		<div class="songlistInfo">
			<!-- 歌单封面 -->
			<div class="songlistCover">
				<img
					:src="
						songlistInfo.cover ||
						'https://lanyun-files.oss-cn-beijing.aliyuncs.com/logo.png'
					" />
			</div>
			<!-- 歌单简介 -->
			<div class="intro">
				<!-- 歌单标题 -->
				<div class="songlistTitle">
					<h1 :title="songlistInfo.name">{{ songlistInfo.name }}</h1>
				</div>
				<!-- 歌单描述 -->
				<div class="desc">
					<p>{{ songlistInfo.desc }}</p>
				</div>
			</div>
			<!-- 播放数量 -->
			<div class="playCount">
				<p>播放数量</p>
				<p class="count">{{ formatNumberWithUnit(songlistInfo.playCount) }}</p>
				<el-button type="primary" @click="playCurrentSonglist">
					<el-icon>
						<VideoPlay />
					</el-icon>
					<span>播放</span>
				</el-button>
			</div>
			<!-- 标签 -->
			<div class="tags">
				<p>标签</p>
				<div class="tag">
					<el-tag
						class="ml-2 pointer"
						v-for="item in songlistInfo.tags"
						:key="item"
						@click="toSonglistCategory(item)">
						{{ item }}
					</el-tag>
				</div>
			</div>
		</div>
		<div class="line" style="width: 95%; border: 1px solid #eee; margin: 0 auto"></div>
		<div class="songList">
			<SongList :songlist="songlist" :isLoading="songlistLoadingStatus" />
		</div>
	</div>
</template>

<script name="SonglistDetail" setup>
import SongList from '@/components/SongList.vue';
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { songlistDetail } from '@/api/songlist';
import { formatNumberWithUnit, formatMilliseconds } from '@/utils/formatter';
import playlistStore from '@/stores/playlistStore';
import { usePlaySong } from '@/hooks/usePlaySong';
import songlistStore from '@/stores/songlistStore';

const router = useRouter();
const songlistId = router.currentRoute.value.params.id;
const playlist = playlistStore();
const { playSong } = usePlaySong();
const { changeCategory } = songlistStore();

let songlistLoadingStatus = ref(true); // 歌单加载状态

// 歌单详情
let songlistInfo = reactive({
	cover: '', // 歌单封面
	name: '', // 歌单名称
	desc: '', // 歌单描述
	playCount: 0, // 播放次数
	tags: [], // 歌单标签
});
let songlist = reactive([]);
async function getSonglistDetail() {
	const res = (await songlistDetail(songlistId)).data.playlist;
	// 歌单简介
	songlistInfo.cover = res.coverImgUrl;
	songlistInfo.name = res.name;
	songlistInfo.desc = res.description;
	songlistInfo.playCount = res.playCount;
	songlistInfo.tags = res.tags;
	// 歌曲列表
	res.tracks?.forEach((song) => {
		songlist.push({
			id: song.id,
			name: song.name,
			singers: song.ar,
			album: song.alia[0] || song.al.name,
			duration: formatMilliseconds(song.dt),
		});
	});
	songlistLoadingStatus.value = false;
}

// 跳转歌单分类
function toSonglistCategory(category) {
	changeCategory(category);
	router.push('/allSonglist?cat=' + encodeURI(category));
}

// 播放当前歌单
function playCurrentSonglist() {
	playlist.changeSonglistSongs(songlist);
	playlist.switchCurrentPlaylist('歌单/榜单列表');
	playSong(songlist[0].id, 'auto');
}

function init() {
	getSonglistDetail();
}

onMounted(() => {
	init();
});
</script>

<style lang="scss" scoped>
.songlistDetailContainer {
	height: 820px;
	margin: 10px auto;
	border: 1px solid #eee;
	background-color: #fff;

	// 歌单信息
	.songlistInfo {
		width: 100%;
		height: 200px;
		display: flex;
		align-items: center;
		justify-content: space-around;

		// 歌单封面
		.songlistCover {
			width: 160px;
			height: 160px;
			border: 3px solid #dff6f0;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
			background-color: #dff6f0;

			img {
				width: 100%;
				height: 100%;
			}
		}

		// 歌单简介
		.intro {
			width: 400px;
			height: 160px;

			// 歌单标题
			.songlistTitle {
				width: 100%;
				height: 50%;
				display: flex;
				align-items: center;

				h1 {
					font-size: 24px;
					color: $main-color;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
			}

			// 歌单描述
			.desc {
				width: 100%;
				height: 50%;
				display: flex;
				align-items: center;
				font-size: 16px;
				color: #333;

				p {
					text-overflow: ellipsis;
					display: -webkit-box; // 作为弹性伸缩盒子模型显示。
					-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
					-webkit-line-clamp: 4; // 显示的行
					overflow: hidden;
				}
			}
		}

		// 播放数量
		.playCount {
			width: 150px;
			height: 100px;
			text-align: center;
			font-size: 16px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			color: #79bbff;

			p {
				margin: 0;
			}

			.count {
				font-size: 24px;
				font-weight: bold;
				color: $main-color;
			}
		}

		// 标签
		.tags {
			width: 210px;
			height: 150px;
			text-align: center;
			overflow: hidden;

			p {
				margin: 0;
				font-size: 18px;
				font-weight: bold;
				color: #333;
				margin-bottom: 20px;
			}

			.tag {
				margin: 0;
				font-size: 14px;
				color: $main-color;

				span {
					margin: 5px;
					float: left;
				}
			}
		}
	}
}
</style>
